<template>
    <div style="width: 100%;height: 100%;display: flex;flex-direction: row;">
        <!--左侧菜单-->
        <div style="flex: 0 1 auto;display: flex;flex-direction: column;transition: width 0.3s ease-in-out;">
            <!--logo存放处-->
            <div class="box-center"
                 style="flex: 0 1 8%;color: white;font-weight: bold;"
                 :style="{backgroundColor: menuColor}">
                <el-image style="width: 30px; height: 30px" fit="fill"
                          :src="require('@/assets/images/vue.jpg')"></el-image>
                <span v-if="!isCollapse">VUE-LEARN</span>
            </div>
            <!--菜单-->
            <div style="flex: 1 1;">
                <Menu :menuList="menuList"
                      :backgroudColor="menuColor"
                      mode="vertical"
                      :verticalWidth="isCollapse?'70px':'200px'"
                      :defaultActive="$route.path"
                      :collapse="isCollapse"
                ></Menu>
            </div>
        </div>
        <!--右侧主体-->
        <div style="flex: 1 1;display: flex;flex-direction: column;">
            <!--header-->
            <div style="flex: 0 1 7%;
                    display: flex;justify-content: space-between;
                    border-bottom: 1px solid pink;">
                <!--这里是header的左半个-->
                <div style="width: 50%;display: flex;align-items: center;padding-left: 10px;">
                    <i
                            class="el-icon-s-fold"
                            style="
                              float: left;
                              cursor: pointer;
                              font-size: 25px;
                            "
                            v-if="!isCollapse"
                            @click="isCollapse=!isCollapse"
                    ></i>
                    <i
                            class="el-icon-s-unfold"
                            style="
                              float: left;
                              cursor: pointer;
                              font-size: 25px;
                            "
                            v-if="isCollapse"
                            @click="isCollapse=!isCollapse"
                    ></i>
                    <el-breadcrumb separator="/" style="margin-left: 10px;">
                        <el-breadcrumb-item v-for="item in breadcrumbList" :key="item.id">
                            {{ item.value }}
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <!--这里是header的右半个-->
                <div style="width: 50%;
                        display: flex;justify-content: flex-end;align-items: center;
                        gap: 10px;
                        padding-right: 10px;">
                    <el-button type="text">
                        <i class="el-icon-lock"></i>
                        锁屏
                    </el-button>
                    <el-button type="text">
                        <i class="el-icon-full-screen"></i>
                        全屏
                    </el-button>
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            <el-image style="width: 30px; height: 30px" fit="fill"
                                      :src="require('@/assets/images/石原里美.jpg')"></el-image>
                            <i class="el-icon-caret-bottom el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>用户中心</el-dropdown-item>
                            <el-dropdown-item>配置中心</el-dropdown-item>
                            <el-dropdown-item divided>退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
            <!--main-->
            <div style="flex: 1 1;display: flex;flex-direction: column;">
                <!--tab页-->
                <div style="flex: 0 1 1%;">
                    <el-tabs
                            v-model="activeTab"
                            type="card"
                            closable
                            @tab-remove="removeTab"
                            @tab-click="clickTab"
                    >
                        <el-tab-pane
                                :key="item.path"
                                v-for="item in tabList"
                                :label="item.name"
                                :name="item.path"
                        >
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <div style="flex: 1 1">
                    <!--保证控件实时刷新-->
                    <router-view :key="$route.fullPath"></router-view>
                </div>
            </div>
            <!--footer-->
            <div style="
                flex: 0 1 3%;
                background-color:#d3e3fd;
                display: flex;justify-content: flex-end;align-items: center;
                color: #7a8b9a;letter-spacing: 1px;font-family: Arial,sans-serif !important;
            ">
                © 2025 maben 2.0
            </div>
        </div>
    </div>
</template>
<script>
    import Menu from "@/components/menu/Menu.vue";

    export default {
        components: {Menu},
        data() {
            return {
                //菜单相关参数
                menuColor: "#304156",
                menuList: [
                    {
                        id: "1",
                        parentId: "0",
                        name: "首页",
                        url: "/test002/m1",
                        icon: "el-icon-s-operation",
                    },
                    {
                        id: "2",
                        parentId: "0",
                        name: "目录一",
                        url: "/test002/m2",
                        icon: "el-icon-s-opportunity",
                    },
                    {
                        id: "3",
                        parentId: "0",
                        name: "目录二",//信息查询
                        icon: "el-icon-s-check",
                        children: [
                            {
                                id: "3-1",
                                parentId: "3",
                                name: "二-1",//基础查询
                                url: "/test002/m31",
                                icon: "el-icon-share",
                            },
                            {
                                id: "3-3",
                                parentId: "3",
                                name: "二-2",//异常查询
                                url: "/test002/m32",
                                icon: "el-icon-d-caret",
                            },
                        ],
                    },
                ],
                isCollapse: false,
                //面包屑
                breadcrumbList: [],
                //tab页
                activeTab: '',
                tabList: [],
            }
        },
        watch: {
            // 面包屑监听
            "$route.name"() {
                this.addList();
            },
            //tab页监听
            $route: function () {
                this.setActiveTab();
                this.addTab();
            },
        },
        created() {
            // 初始化面包屑
            this.addList();
            //初始化tab页
            this.setActiveTab();
            this.addTab();
        },
        methods: {
            // 设置活跃的tab
            setActiveTab() {
                this.activeTab = this.$route.path;
            },
            // 添加tab
            addTab() {
                const {path, name} = this.$route;
                for (let i = 0; i < this.tabList.length; i++) {
                    let item = this.tabList[i];
                    if (item.path == path) {
                        return;
                    }
                }
                this.tabList.push({
                    path: path,
                    name: name,
                })
            },
            // 点击tab
            clickTab(tab) {
                const {name} = tab;
                //当使用 this.$router.push 跳转到相同路由时（即使参数不同），默认不会重新加载组件
                this.$router.push({path: name});
            },
            //移除tab
            removeTab(target) {
                // 当前激活的tab
                let active = this.activeTab;
                const tabs = this.tabList;
                // 只有一个标签页的时候不允许删除
                if (tabs.length === 1) return;
                if (active === target) {
                    for (let index = 0; index < tabs.length; index++) {
                        const tab = tabs[index];
                        if (tab.path == active) {
                            // 如果删除的就是当前活跃的tab,就把活跃的tab变成上一个或下一个
                            const nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                active = nextTab.path;
                                break;
                            }
                        }
                    }
                }
                // 重新设置当前激活的选项卡和 选项卡列表
                this.tabList = tabs.filter((tab) => tab.path !== target);
                this.activeTab = active;
                this.$router.push({path: active});
            },
            //面包屑重置（依赖router的name）
            addList() {
                let arr = this.$route.matched;
                let arrResult = [];
                for (let i = 0; i < arr.length; i++) {
                    let item = arr[i];
                    if (item.name && item.name != "") {
                        arrResult.push({
                            id: item.path,
                            value: item.name,
                        });
                    }
                }
                this.breadcrumbList = arrResult;
            },
        }
    }
</script>